<template>
  <div class="layout-header">
    <div class="layout-header-flex">
      <div class="breadcrumb-box">
        <div class="fold-box" @click="handleRetract">
          <i-ep-Fold></i-ep-Fold>
        </div>
        首页
      </div>
      <div class="header-right">
        <div class="nav-item" @click="handleFullScreen">
          <BIcon name="FullScreen" :title="isFullScreen ? '关全屏' : '开全屏'"></BIcon>
        </div>
        <el-dropdown>
          <div class="user-box">
            <img class="user-img" src="http://hyuu.oss-cn-shenzhen.aliyuncs.com/Y52016146512698711.png" alt="" />
            <span class="user-name">张三(管理员)</span>
            <el-icon>
              <i-ep-ArrowDown></i-ep-ArrowDown>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>首页</el-dropdown-item>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { } from "vue";
import BIcon from './BIcon.vue';
const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["onCollapseChange"]);
// 伸缩
const handleRetract = () => {
  emit("onCollapseChange", !props.isCollapse);
};

// 全屏
const isFullScreen = ref(false)
import screenfull from 'screenfull';
const handleFullScreen = () => {
  screenfull.toggle();
  isFullScreen.value = !screenfull.isFullscreen;
}
</script>

<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

.layout-header {
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
  height: 50px;

  .breadcrumb-box {
    display: flex;
    align-items: center;
    height: 100%;

    .fold-box {
      padding: 0 10px;
      height: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        background: $hover-bg-color;
      }
    }
  }

  .layout-header-flex {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header-right {
    padding-right: 15px;
    display: flex;
    align-items: center;
    height: 100%;

    .nav-item {
      height: 100%;
      padding: 0 10px;
      display: flex;
      align-items: center;
      cursor: pointer;

      &:hover {
        background-color: $hover-bg-color;
      }
    }
  }

  .user-box {
    display: flex;
    align-items: center;
    color: #b5bece;

    .user-name {
      margin-right: 10px;
    }

    .user-img {
      width: 40px;
      margin-right: 10px;
    }
  }
}
</style>
